<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>按钮变色</title>
	<style>
	button{
		width:100px;
		height:50px;
	}
	</style>
</head>
<body>
	<button onclick="hanS(this,'pink')">变粉</button>
	<button onclick="hanS(this,'yellow')">变黄</button>
	<button onclick="hanS(this,'blue')">变蓝</button>

	<script type="text/javascript">
       //获取节点
       // var btn = document.getElementsByTagName("button"); //获取节点
       // console.log(btn);//检测节点是否被获取
       // 方法1
       // btn[0].onclick = function(){
       // 	 btn[0].style.background = "pink";
       // }
       // btn[1].onclick = function(){
       // 	 btn[1].style.background = "yellow";
       // }
       // btn[2].onclick = function(){
       // 	 btn[2].style.background = "blue";
       // }


       //方法2  封装函数
       // function hanS(jie,yan){
       //        jie.style.background = yan;
       // }
       //方法3  for循环 this当前节点 只能实现同一个颜色
       var btn = document.getElementsByTagName("button");
       var arrCl = ["pink","yellow","blue"];
       for(var i=0;i<btn.length;i++){
       	btn[i].onclick = function(){
       		this.style.background = "red";
       	}
       }
	</script>
</body>
</html>